<template>
    <div class="theme-switch flex-row-center">
        <!-- active-icon="Moon" inactive-icon="Sunny" -->
        <el-switch title="切换主题" @click="toggleTheme" :before-change="handleBeforeChange" v-model="isDark" inline-prompt>
            <template #active-action>
                <svg t="1751529947663" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3508" width="200" height="200">
                    <path fill="rgb(242,242,242)"
                        d="M679.573333 73.493333a21.333333 21.333333 0 0 0-28.266666 25.6 405.333333 405.333333 0 0 1 14.186666 112.746667 408.533333 408.533333 0 0 1-394.08 401.173333 405.333333 405.333333 0 0 1-190.986666-40.64 21.333333 21.333333 0 0 0-30.346667 23.093334 469.333333 469.333333 0 0 0 485.333333 385.28c243.84-11.84 439.413333-212.16 445.76-456.213334a469.333333 469.333333 0 0 0-301.6-451.04zM202.293333 262.72a8.96 8.96 0 0 0 2.88 0.426667 75.946667 75.946667 0 0 1 75.733334 75.733333 7.626667 7.626667 0 0 0 0.48 2.88 11.52 11.52 0 0 0 22.186666 0 8.746667 8.746667 0 0 0 0.426667-2.88 76 76 0 0 1 75.733333-75.733333 8.746667 8.746667 0 0 0 2.88-0.426667 11.573333 11.573333 0 0 0 0-22.24 8.746667 8.746667 0 0 0-2.88-0.426667A76 76 0 0 1 304 164.32a8.746667 8.746667 0 0 0-0.426667-2.88 11.52 11.52 0 0 0-22.186666 0 7.626667 7.626667 0 0 0-0.48 2.88A75.946667 75.946667 0 0 1 205.386667 240a8.96 8.96 0 0 0-2.88 0.426667 11.573333 11.573333 0 0 0 0 22.24z"
                        p-id="3509"></path>
                </svg>
            </template>
            <template #inactive-action>
                <svg t="1751531141836" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="12244" width="200" height="200">
                    <path fill="rgb(44,44,44)"
                        d="M269.963636 200.145455L186.181818 116.363636 116.363636 186.181818l83.781819 83.781818 69.818181-69.818181zM139.636364 465.454545H0v93.09091h139.636364v-93.09091zM558.545455 4.654545h-93.09091V139.636364h93.09091V4.654545zM907.636364 186.181818L837.818182 116.363636l-83.781818 83.781819 65.163636 65.163636L907.636364 186.181818zM754.036364 823.854545l83.781818 83.781819 65.163636-65.163637-83.781818-83.779993-65.163636 65.161811zM884.363636 465.454545v93.09091H1024v-93.09091h-139.636364z m-372.363636-232.727272c-153.6 0-279.272727 125.672727-279.272727 279.272727s125.672727 279.272727 279.272727 279.272727 279.272727-125.672727 279.272727-279.272727-125.672727-279.272727-279.272727-279.272727zM465.454545 1019.345455h93.09091V884.363636h-93.09091v134.981819zM116.363636 837.818182L186.181818 907.636364l83.781818-83.781819-65.163636-65.161811L116.363636 837.818182z"
                        p-id="12245"></path>
                </svg>
            </template>
        </el-switch>
    </div>
</template>

<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core'
import { useIsDarkStore } from '@/stores/isDark'

const isDarkStore = useIsDarkStore()
// true:'dark' false:'light'
const isDark = useDark({
    storageKey: 'el-theme',
    valueDark: 'dark',
    valueLight: 'light',
    initialValue: 'light'
})


// 存储到pinia
watchEffect(() => {
    isDarkStore.setIsDark(isDark.value)
})

const iconColor = computed(() => isDark.value ? 'rgb(242,242,242)' : 'rgb(44,44,44)')

// 切换主题类
const toggleThemeClass = useToggle(isDark)


// 支持startViewTransition的浏览器 拦截这里的切换 在动画transition中去调用切换
const handleBeforeChange = () => !document.startViewTransition


//切换主题
function toggleTheme(event: any) {
    // 检查浏览器是否支持 View Transition API
    if (!document.startViewTransition) {
        // 不支持则直接切换主题，不添加动画 (此时el-switch已双向绑定切换)
        return
    }

    const transition = document.startViewTransition(() => {
        toggleThemeClass()
    })


    transition.ready.then(() => {
        const { clientX, clientY } = event

        const endRadius = Math.hypot(Math.max(clientX, innerWidth - clientX), Math.max(clientY, innerHeight - clientY))

        const clipPath = [`circle(0px at ${clientX}px ${clientY}px)`, `circle(${endRadius}px at ${clientX}px ${clientY}px)`]

        document.documentElement.animate(
            {
                clipPath: isDark.value ? clipPath.reverse() : clipPath,
            },
            {
                duration: 450,
                easing: 'ease-in',
                pseudoElement: isDark.value ? '::view-transition-old(root)' : '::view-transition-new(root)',

            }
        )
    })
}

</script>

<style scoped lang="scss">
.theme-switch {
    z-index: 9999999999;

    .el-switch {
        // --el-switch-on-color: yellow !important;
        // --el-switch-off-color: var(--el-color-primary) !important;

        --el-switch-on-color: #2c2c2c !important;
        --el-switch-off-color: #e6e6e6 !important;
        --el-switch-border-color: var(--el-color-info-light-5) !important;
        // --el-switch-border-color: #dcdfe6 !important;
        --el-color-white: transparent
    }

    :deep(.el-icon) {
        color: v-bind('iconColor');
    }
}
</style>